<template>
  <div class="container">
    <div class="item" v-for="(item, i) in searchArticle" :key="i">
      <!--  头部信息栏  -->
      <div class="item-head">
        <!-- 作者名 -->
        <div class="user-name">
          {{ item.result_model.author_user_info.user_name }}
        </div>
        <!-- 时间栏 -->
        <div class="time">
          <el-divider direction="vertical"></el-divider>
          {{ item.result_model.article_info.rtime | timeago }}
          <el-divider direction="vertical"></el-divider>
        </div>
        <!-- 文章标签 -->
        <div class="tag-list">
          <span
            class="tag-search"
            v-for="(item2, i) in item.result_model.tags"
            :key="i + 'tag'"
          >
            {{ item2.tag_name }}
          </span>
          <span></span>
        </div>
      </div>
      <!-- 中下内容 -->
      <div class="item-body">
        <!-- 内容主体 -->
        <div class="main">
          <!-- 标题 -->
          <div
            class="title"
            @click="goArticleDetail(item)"
            v-html="
              item.result_model.article_info.title
                .split(keyword)
                .join('<span>' + keyword + '</span>')
            "
          >       
          </div>
          <!-- 文章预览 -->
          <div
            class="content"
            v-html="
              item.result_model.article_info.brief_content
                .split(keyword)
                .join('<span>' + keyword + '</span>')
            "
          >
          </div>
          <!-- 下方操作按钮 -->
          <div class="action-list">
            <!-- 点赞数 -->
            <div class="action-list-item search">
              <img src="../../../assets/img/home-content/like.png" alt="" />
              <span>{{ item.result_model.article_info.digg_count }}</span>
            </div>
            <!-- 回复数 -->
            <div class="action-list-item search">
              <img src="../../../assets/img/home-content/reply.png" alt="" />
              <span>{{ item.result_model.article_info.comment_count }}</span>
            </div>
            <div class="action-list-item tag-share search" title="分享">
              <img src="../../../assets/img/search/share.png" alt="" />
            </div>
          </div>
        </div>
        <!-- 图片 -->
        <img
          class="item-img"
          v-show="item.result_model.article_info.cover_image"
          v-lazy="item.result_model.article_info.cover_image"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: 'vue'
    }
  },
  created() {
    this.keyword = this.$route.query.query
  },
  mounted() {
    console.log(this.searchArticle)
  },
  props: {
    searchArticle: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    goArticleDetail(item) {
      this.$router.push(`/article?id=${item.result_model.article_id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
}
.item {
  display: flex;
  cursor: pointer;
  flex-direction: column;
  padding: 12px 20px 0;

  .item-head {
    display: flex;
    font-size: 13px;
    line-height: 22px;
    color: #4e5969;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    align-items: center;

    .user-name:hover {
      color: var(--taojin-brand-2-hover);
    }

    .tag-list {
      overflow: hidden;
      text-overflow: ellipsis;
      .tag:not(:last-child):after {
        display: inline-block;
        content: ' ';
        transform: translate(3px, -3px);
        height: 2px;
        width: 2px;
        border-radius: 50%;
        background: #4e5969;
      }

      .tag {
        padding: 0 8px 0 0;
      }

      .tag:hover {
        color: var(--taojin-brand-2-hover);
      }
    }

    .is-ad {
      margin-left: auto;
      border: 1px solid #c9cdd4;
      border-radius: 2px;
      line-height: 18px;
      width: 42px;
      text-align: center;
      color: #c9cdd4;
      font-size: 13px;
    }
  }

  .item-body {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e6eb;
    .main {
      overflow: hidden;

      .title {
        color: var(--title-color);
        font-size: 1.5rem;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        :deep(span) {
          color: red !important;
        }
      }

      .content {
        color: var(--text-color);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0.8rem 0;
        font-size: 1.08rem;

        :deep(span) {
          color: red !important;
        }
      }

      .action-list {
        display: flex;
        .action-list-item {
          display: flex;
          align-items: center;
          img {
            width: 1.4rem;
            height: 1.4rem;
            color: var(--like-color);
          }
          span {
            margin: 0 1rem 0 0.5rem;
          }
        }
        .search {
          border: 1px solid #edeeef;
          display: flex;
          justify-content: center;
          padding: 3px 10px;
          color: #b2bac2;
          span {
            margin: 0 0 0 5px;
          }
        }

        .search:hover {
          background-color: #f7f8fa;
        }
        .tag-share {
          display: none;
        }
      }
      .action-list:hover {
        .tag-share {
          display: inline-flex;
        }
      }
    }
    .item-img {
      flex: 0 0 auto;
      width: 120px;
      height: 80px;
      margin-left: 1rem;
    }
  }
}

.item:hover {
  background-color: rgba(242, 242, 242, 0.4);
}
</style>
